OK.
Hello, hello, I'm not answering.
OK.
Today is our six, day six, I would like to welcome all of you in today's Titian's we are sorry of
yesterday, Mr Karani faced the city overall.
Even today, the electricity is not yet re-established.
But he went to a hotel to to conduct this training to rent a room in the hotel.
So today's session, we will go for one hour and a half to catch the yesterday, the session of yesterday.
Let's just start by a small quiz, OK?
A question about what we saw today.
Now, anyone knows what is DOCTYPE control, what is what we call what is the DOCTYPE controller.
And, you know, anyone knows what is the DOCTYPE controller?
Controller.
Fine, if you answer yes, go ahead, Gaiam, it's the lightning in the back and logic is excellent.
So when we created that time, Automattic probably will create the by the by the by based on fire,
which is the controller.
We saw this last session.
We wrote one line of code where we derive the full name from first name and last name, and the third
field is a full name derived using.
We wrote the code in the controller file of that DOCTYPE.
Excellent.
So anyone have questions or faced problem or have doubts for Delanoe.
So you have opportunity to ask or to raise your question.
Yes.
Last session, Garani, I got a question from ISIS, she said, When we use Vicha from option offensive,
it is deriving one value like FINSA from we derive imeem gain.
She said, can we derive the multiple values to multiple allies?
Many too many fits from can can work like this.
Well, the from this is used to.
Phase one is you could get one value from from a DOCTYPE item that was specified.
That is our field, a field inside the autoclave.
So it can only be used to fetch one item that is the fetch from that provided out of the box.
But if you need to do your own custom fit from, maybe that is triggered in some way.
You can you can write that you can you can actually write your own custom fetch for a function that
does whatever you want it to do.
Okay, great.
So it's not possibly multiple value is not possible.
It is not possible.
Yeah.
Another question.
I don't know.
We do we take notes from previous session.
He is asking about Checkbook's Finch, if not the last time you remember it was not working.
So if you have any answer for this.
So you can imagine.
There is a check box under threat from field to fetch, if not.
Yes, I remember that.
Yeah, so we are trying to use it, but we took notes to take it offline.
Yes, honestly, I have not done my research on that with any of us has gone ahead and done that.
He or she will be of help.
I've not done it all myself.
Money.
Good.
I will keep it open.
If we have any answer, we will share it with the team.
By the way, we have loaded in the recording shared folder, uh, the installation, the steps detailing
the steps for Ubuntu twenty how to install step by step yesterday.
It is now, now, just now it's available in the recording and it is shared in the YouTube channel of
coronation.
So let's go and start our today agenda to go ahead please.
Thank you.
Thank you so much.
So today the.
Let me share my screen.
Today's session is going to be longer, a little bit longer, so that we can take care of that this
time, so I can see my screen.
Yes, yes, yes, great.
So I have I have.
Some items here, yellow, I have highlighted them in yellow, these are the items we have covered and
today we we are looking at item number 11 as the first one.
And then we are going to look at some of these others, some of these others in the I have I had also
prepared some notes, just told someone to take a screenshot because I left my house in the morning.
So we are doing today we are going to be seeing how to do custom buttons, either single or grouped
buttons in form of a script.
Then we are going to see all these other things.
Now, our custom script is is our way of of making sure that you are able to do things on the front
end of your application.
So if I look for Frappier.
Script recommendation for Frappé Europeanist.
They are a lot of things we can do with these things, it's a long list, a long list you can see here.
So this one, I would recommend that you go and read it on yourself, but I'm going to do a quick introduction
and then show you where you need to place your files.
And then you be good to go to follow this documentation and do whatever you like to do.
Now, there are two ways of writing custom scripts.
If you come to the awesome bar and such for custom script custom scripts, you see here we have an item
for creating custom scripts and this thing asks you to give a DOCTYPE.
So for instance here, if we give Labra remember, this item goes ahead and fetches them, increase
the font a little bit.
So I have ask you, OK, I have to remember in the custom script section and then it has automatically
fetched to this.
If you look at this, this is our DOCTYPE, this is a DOCTYPE, this is the doctor that you have selected.
So in case we change this maybe to something else, like a library membership, you see this one is
it is updated to library membership.
So this code is generated out of the box.
And then this is where you are supposed to come in and put in the logic that you like to execute.
Now, this is when you want to read you a customs crib's on the front end, which as developers, we
are not going to do a lot.
The happiness that it is for people who are not, who are not, who are not really developers.
So for our kids, we are really going to be using this.
In fact, I don't use this at all.
I don't do anything with this.
But so where we are going to be writing our customs is in the file system, in the individual files.
And what I mean by individual files is, for instance, if you want to change something in the library
membership document document, I would just go to the file system.
Increase the font here and then I will go to let me compress this, I'll go to my apps, the library,
then library management, library management again, then I will look for my DOCTYPE directory.
Then remember, you want to change for all.
We want to create a script for library membership, so we need to look for library membership here.
And the library membership today is fine.
If you open that file, you realize that it a code that is here is exactly what we had on their form.
So you see here we have rapido, the UI dot form dot on then then the name of your doctor.
If you come here you have rapido divide those from those on library membership.
So this is the same when you write your script here and when you read your script here, they call the
same functions and they do exactly the same things.
But the advantage of writing your code on the on the back end, remember, is so as to keep track of
your code.
So even if maybe something happens to your front end here, you're not going to lose this code because
ideally when you write your code on these files, you can decide to trust your code on GitHub.
You can even have it in multiple computers and stuff like that.
So we are going to be doing all our code writing on this script and we are going to be customizing our
scripts from I don't know whether there's anyone who has a question up to that.
Yes, of course, yes.
So if you go to the front end.
Yes, if you would enter code there and save, that will not that will not update the file on your desk
right now, it will not update the file.
What what the European does is that they generate ideas on ideas on this.
This, Jason, if you look at this just on file, most of the things here are the they are the column
names that we have on our forms.
So it generates ideas on which then is used to tell the application what it needs to do.
But it could be right on this custom script on the browser will not be written on this file.
It is saved in the database, I guess the one in the front.
And it is if I think they generate they generate the addition they generate.
I just just let you know, when you come to the when you come to the application and you customize this
form, you add your own filter here.
What they do is that they generate a decent file and then the application knows what to do.
They just don't file.
They know if I find it is just on file.
This is our compiler and get this amount of this this kind of result.
But is not the the current site website only.
Or if I would have my app installed in multiple sites, what would it affect all of them or just the
site that I'm in now?
If you have your app installed on multiple sites to affect it, to affect the traffic it offered to
all the other instances you have.
OK, yes.
Thank you.
You're welcome.
But maybe if you write a custom script in the front, then it is specific that one site is a specific.
Yes, yes, that's correct.
OK.
All right, so so now we are going to go ahead and so we are not going to be writing these ones here
so we can just discard this.
We are going to be putting our lives on the fence, so now going back to our Galatea, we need to,
first of all, create a custom button in how you create a custom button on Frappier.
I had written something here.
So I'm not a very fast typer, so I don't want to spend a lot of time typing.
I just want to copy and paste.
Just close some of these things.
OK, and so was that.
I had prepared this.
Is six.
So if you look at this, I mentioned that we are going to be putting our foot on this.
And by the way, we have a number of a number of medals you can call here if we uncommented this.
We have this is sort of OK, I think I have to give let me give this information so that you don't keep
doing that.
So let me split this.
Maybe increased from what you can see this just in case you needed.
So those who
what I'm doing.
You saw that when I tried to save this file, I always thought, let me do it again, save.
And you see, it's telling me to provide sort of permissions.
And every time I see anything, I have to provide a password.
So I want to give the permission.
So I guess it's OK.
It depends.
And then he starts screaming and then we have apps and our app is library and then we have the data
library again.
And library again, so here we have what we have here.
We have duct tape associated with duct tape and then to library, we want to tell you what you want
to create.
We want to create our.
A library.
Remember, this is where you want to create complete our custom, our custom button and use it to do
a number of things.
Yes, we are going to be seeing in this session today.
So we are going to give you a little tape of library member socity in the library.
Namba.
And here we are, we have our API, we know we have we have we have we have.
We have this for this.
If I wanted to start editing LeBron so I can just say pseudo change modes two seven seven seven.
And this is library member James.
They provide my password and that's it.
So now I can close that, I should be having permissions to edit that file.
So if I see it again.
Still no permissions.
Give me a second.
You are from the library membership and not library member, you're not.
Oh, OK.
Could you do this?
Come in for the whole folder for the whole life?
Yeah.
Yeah, sure, sure.
So let me do that then.
But sometimes it is important that you take care so that you do not maybe give permission to fold up
and maybe allow it to access files that are going to give you issues.
Sampath.
Not required to have information, so it's good to be careful.
But in our case here, we can just go door to door to.
Reflexively for the Labor member.
So we are we have given it to the whole of America right now and they've discussed this if we are good.
So now I will say this is one function that we have refreshed means this is going to be this this function
is going to be called every time that you are refresh on your form.
We have other functions like set up like before save like aftershave and all that as you are going to
be seeing on the documentation.
So I want to put my code here that is going to be adding a custom button to my to my form here somewhere
here so I can just copy that code from from this as subscripts I.
But yes, you are editing the membership.
She has no membership in the front and you are in the library.
Remember all that?
Sorry.
Thank you so much for that.
So let me exit the library member.
And.
And then I opened this, so this is where you are supposed to be.
Yeah, this area is supposed to be because basically you can write based on any file, but I want us
to use this one because it already has some data here.
I want us to try and manipulate this data using our custom scripts.
That's why I'm fixed on this one.
But you can write this script on any case file.
So if you needed to edit the membership for you are going to be using the library membership, just
file.
All right, so I have a button, sorry, yes, go ahead.
Yes, OK, so I have a button on the refresh function.
Remember, it was there and that's what I want to use.
And then this is the form.
This form is what has been passed here.
So this is basically the whole form.
I'm going to be showing you what this form contains and then you are telling it, don't add custom custom
button.
So this is a function that is done by frappé and then this is the text that is going to be on the button.
And then you tell it in this function, you this function, you carry what is going to happen when someone
clicks on this button and here we are just telling it to console log a message saying hello there.
So if we go back to our our application, remember, this is JavaScript, so you need to reload and
just to be sure that you are reloading it right.
You just need to hold control and shift and.
Ah.
And here we have our button saying say hello.
And if I inspect element.
Then I go to my console, just clear.
Then I look for my button here, yeah, yes, my button things say hello, I click on it, and here
is he has that message saying hello there.
Don't worry about these these these these errors.
They are just about some items that are not being that are not found.
So if I click on this button now, I can be able to put in any Unicode here and it will be executed
when I click on the button that I created.
We have Akwesasne.
Uh, yes, the refresh event is called, uh, many times, I guess.
Yes, so the ad custom button would detect that it already exists and not add it a second time.
What is going to yeah, it will not be added a second time, every time you refresh is going to is going
to trigger this fan base, that event, and is going to add that button to your form.
So even if you keep refreshing, it will be one.
So if I refresh this again, it's going well.
Yes.
Now you refresh with a sec, but if you change your value and hit save, this will call the refresh
again event again.
If I change the value of our award and Ifield, let's say your name and then say is not going to cost,
is not going to refresh.
So if you here if I can Sloggett concert logo log in the refresh event, I think it's called on each
say, you know, it's not on, it's just above the console here.
When I say nothing is logged, there's nothing.
You have no log in the refresh, even if you put a line in the refresh.
No, it's on click of the button.
If you put a log in the refresh event or.
Or you mean you mean somewhere here.
Yep.
Let's see what happens.
It's not called no, let's see, wait, wait, wait, wait, wait, just just a second.
Uh, hello there, it's called and then if you change your value and hit save.
So if you change the venue here either way and hits if it's called again, it's cold again.
So the bottom is cold again, but it's handling the the fact that it already exists in the.
On the.
Correct.
Thank you.
Thank you, Maureen.
Another question.
Refresh Even's.
What is exactly what does it mean.
And you didn't get it.
So what what this refresh event means is that every time the form refreshes, then do whatever is inside
here.
So like what Maureen just pointed out, we have our Consolo.
We are creating this system.
Every time we refresh there, we have a refresher on our form.
Do this.
So our refresh is basically means reload or something like that when I reload, run this function.
So in our case here is going to cause all of this message and then is going to call this this this other
this other item of code that is going to create our custom button.
But if you see if you say refresh, you will be called.
Yeah, basically.
Because when you say if this is going, I think what is being done to limit it and save you see it has
it has saved and then it's loaded so that they could be available here.
So I think it's calling refresh, refresh, refresh function.
Yes.
OK.
OK, another question before we move on.
JavaScript overall JavaScript code.
Why we need to write, why we need to write JavaScript.
JavaScript is used, so I don't know whether that is the context of this, but JavaScript basically
is is what gives life to your application, because JavaScript runs mostly mostly JavaScript, especially
the one that we are going to be dealing with here in Europe next.
It runs on the front end.
So devastated is what makes the UX of the application, that is the user experience feel like the system
has a life, because if you only write Python code here, it just does things on the server.
Maybe the user will have to keep refreshing how refreshing this system to see anything that is happening.
But when you write JavaScript, we are going to be seeing you able to add this button here.
You able to click on the button and something happens without having to force the user to do something
like a hard refresh or something like that.
So JavaScript, I would say, is what gives life to our application and a good user experience when
they're using your app.
So button button is added only using JavaScript not.
You can also do bite buttons in Python, but that would mean you will have to write other you have to
write other, you have to interact with other, other with quite some good.
But in European text and in context here we only going to be doing using JavaScript.
OK, so if I need to add validation in the front end before seeming like if you enter the email without
arabesque, so the data validation is handled essentially by JavaScript.
You said you went without what?
At the end, at this one example, you had some sort of validation, you are doing validation in front
end before saying, yeah, so what happens?
There are two types of validations that you can do here.
You are the you are going to do the first validation is going to happen on the front end.
So that happens even before this system submits the data to this offer.
And then if that is successful, once they did that has been submitted, it is good practice to also
do validation on the backend so that you, again, don't receive data that maybe is not what this app
was expecting.
So validation can be done on two levels.
OK, that is great, anyone else?
It's OK.
OK, so let's let's move on.
So we have we have done our custom button here.
That is our single button.
Look, look at this form, this is only one button, but if you have interacted with ERP next, you
have seen some some places where we have a button here.
You click on it and there are other items inside of it.
So how do you do that?
And the only the easiest the easiest way to do that is the button that you have here.
Actually, we can just copy this button that you have here.
You just duplicate it, but now you had back home.
We are not a full column.
Not a semicolon there.
Semicolon is going to come at the end of you at the end of you.
Are you are you are you are battles.
And then once you have that, what you are going to do here is to add a comma and then give you a a
name like like maybe you can, you can if that's not an action or something like that.
So if right now we go to our application.
Refresh.
What you are going to be getting here, we have they say they say hello that we had and then here we
have another button, a seeing action.
And when you open it, it has to say hello.
There is one we have they say hello here is because we have added this attorney and only this button.
So if I if I change this to button who is and save and then I reload, I'm expecting to see button two
here once these phone finishes reloading.
And yes, we have button two there.
So why is it that it is not on the first button?
We had our first button here and basically it's basically because we don't have this, this, this,
this is what groups the button.
So you need to put that on this other button up there.
Then I can save that up and then I go to my phone to reload.
And now here I, I'm going to have two buttons.
So when I open that, I have to say hello and I have button to so if you have buttons that you need
to group to to have in groups like you, you have an action here.
You need this button to do one thing.
You have another button that you need to do another thing and maybe even limit the number of buttons.
This is how you are going to put it.
I have pretty I installed.
That is why it is reformatting my code.
So you just add a comma just after you have closed the last function and then you put the name of the
group that you want to put.
So he can call this button one.
One question on the.
OK, so we can move on from.
So now how do you think the message is delivering messages from our custom buttons?
For instance, you need maybe this is a function that you have written and you need maybe when you click
on it instead of just logging something, is it goes to the back end.
You are going to see hopefully by the end of this session, we are going to be clicking a button which
is going to call an API on the backend.
So after the API has finished doing its, then you need to give them.
I use a message telling them maybe in form of a dialogue here, that whatever or maybe it's the return
on error or is telling them that whatever was happening on the server has succeeded.
How do you trigger messages on frappé in frappé framework.
So how do you do that.
You just write the simple code so I can just come to this one and instead of console logging something
here, I can just put it so these functions, I own the documentation.
This is a message.
Print simply means message print and then we can do here.
Our code ran something like that.
We want to see the message printing when we click on our button.
And when I wrote that and I click on button one, I have this message saying our code that.
So that is how you call you trigger messages on the framework, let me know whether they are the actions.
Yes, about the translation, if we want to translate this message.
Can you show how how it get translated?
Suppose you have English and Arabic, you know, you show a message that this message I is in translatable
or it is fixed.
Well, maybe I have not done that.
I have written out of applications in only English, but I think because this is these are strings that
you can you can supply the string dynamically.
Mummy, when you it when you put into this, you can maybe convert this, you can do something, maybe
you can write.
This place is not limited.
You can write any amount of code here.
You can even call other functions here.
So the function that is maybe sitting somewhere that that these translation you can call it providing
a string that you need to translate whatever language and then give you a string here dynamically.
OK, yes.
OK, so for instance, if I took this and said, let's message we.
This I can just take this and put it here.
So this is a dynamic, I continue this community.
So if I come to my application now, I'm expecting to see the same result.
Go and yes, we have our message there.
So this is a dynamic you can you can do all the logic you want here and then print whatever message
you want here.
Great.
Anyone else it needs clarification.
OK, so that is about that's about regarding messages.
How about collecting phone data?
Using our custom button, I mentioned that we are going to be we are going to be manipulating this data.
And I also told you that I am going to be showing you what is in this form.
This is our aim.
This basically the form.
And let us try to do that.
We can remove this for now or maybe leave it there and we do it a button to try and log.
Maybe now we do consult or log and this time we log that if our aim.
We want to look and see what what is in this form, so let's go back to our application.
Reload and open the console, open the console, and it will be back to the console and then click on
button two and then you look here we have we have we have a lot of data that has been logged.
So these are all the items you can look at it at one time.
These are all the metals that were able to access from your home.
But no, we need that.
We need this item, the form that we have here.
How do we get to this?
If you look down here, you are going to see something called Doch.
So here we have a dog and the dog contains all the fields that we have in our form here.
Can you increase zoom current?
It's very small.
You see it now.
We can see, but it is very small.
Well, yes, yes, yes, yes, yes, yes.
OK, so I was saying I have logged what do I need to let me just clear this and log it again.
So this is this is what has been a lot of click on this button.
And when you open the a lot of medals here that's accessible, this is what I will say you can go and
have a look at during your own time.
We are today interested in this particular function here, Doc.
So I will say when you open the door, the fields, all the fields we have here.
So if you had the form here with those on the fields, all of them are going to be accessible here.
So because our form is more like this, we are seeing on these.
So if we need to access any fields on this, what we are going to do, like now if we just go and instead
of logging form only, we form dot dot was going to happen.
So we look form dot doc, what is going to happen here is that we are going to be seeding only this
part of this part of our application and it is this JavaScript.
So we need to refresh.
And when this comes up, click on button two, so when you open this object, these are the only things
we have.
So all the others have been eliminated and we only have our form down here.
And I suppose we need that now.
They may be only the full name or maybe the email address.
We can just copy the email address and take it back here and do the e-mail address.
So basically you can see that we are able to access in any field using the form dot, dot, dot, whatever
the name of the field is.
So if I refresh this now.
In Korea, the console.
And then I click on button two, the only thing that is getting logged is the email address that is
on this phone.
So this is how we harvest the data, all we have is the data.
So these are collecting data.
Yes.
So that's how you should collect the data.
You pick the this this is standard.
Where is it?
The form dot dot standard.
And then when you have your document, you can access any field within that document with this.
So suppose you needed to maybe after you click a button to do something with the email address, you
do not need to go back to the Sabata and the query that we with with with whatever parameters get this
email address.
You just pick it using from the doctored the name of the field and you are able to get your email address
or maybe the phone number and then send a message.
For instance, this just an example to that phone number.
So that's how you do it.
And now we are there, the phone dialogue before I go there, maybe there is someone in that question.
It is a girl and you have anyone have a question?
Gentlemen, ladies, ladies, anyone have a question?
Karen, you have a question?
Yes, go ahead.
Now you are editing the record.
Yes, indeed.
Moderate and I remember go to the.
Yes, you are editing.
Yes.
If someone is editing, same record in another position, other, I use it.
So your friend that will name it will retrieve the data locally in the browser or from database.
Now this one is retrieving from the browser.
It's not doing any kind of a call to the database.
OK, yes.
One more question, just it's a request, not a question.
So instead of displaying the email address, after clicking the button in the console, could you just
change it to a message like once we click on a button to display it as a message?
The email address.
OK, so what we can do is just is just take this so maybe we can see we can let it mill and then we
get our email from the form.
So we do form dot, dot, dot email address, I think was this one.
And then we just take this email address and print it out for folks from all four or from from it's
not from his formal.
Is this this this item here?
So if we go to our inbox and reload.
Now we can click on button one and it gives us the e-mail address.
Same as the e-mail address and the front end.
Correct, yes, yeah.
So before clicking on the e-mail address, I started clicking on the button, can you change this email
address and then click on that button?
Absolutely, that is where we are going, that is in the proper dialogue, because we want to know maybe
we have another baton here.
When you click on it, it looks at dialogue, maybe with one field, and then you enter something in
that field.
And then when you say if you click on submit it, it changes whatever you do want to change here.
So that one is the dialogue.
You know, they want to increase.
The email had one, for example, and press button and one in the bottom one and press button one.
Yeah.
Yeah, yeah, yeah, it's reading from the Foreign Policy Directive from.
Yeah, this is directly from the phone is not making any kind of a call to the.
Try this, this is the item.
Let me let me go back here again, if you if you will, if you can log.
Console reform, item audit, it is absolutely from the back end and it's sitting on the front end.
So if if you come here and and let me reload.
Clearly, this is a little bit when I click on this, you see this one is already being logged here.
So this this has everything on the browser is not going to go up to the back end and do any other kind
of I call this a loaded immediately.
When you load the browser at the point when you look at the browser, if it came with all this data
put as objects inside of your arm object.
So every time you call, if I am told anything, dot any of these methods here, it fetches the data
that is inside of this is not going to go back again to the database.
The last time you wrote a code in the controller file and Toolan to the right to the full name field.
Yes.
Go to the four front end.
I go to the front end is.
Yes, yeah.
The full name is full of fulfillment by Python code, right?
Yeah.
This is Python.
Yes.
Yeah.
In this case, Python is is writing in the database, not in the front end already.
Yes there is on Mummy is because Python is as a side language in the in the in the case of Python is
writing, is doing everything on the sarva.
So when, when you have this one here, this before say you see it's different because if this is before
saving this thing into the database, before you save do this.
So it's going to have this one, the surfboat full name said to whatever is the value of the first name
concatenated with whatever is the value on the second name and saved here and now and you save this
will already have a value and is going to be saved to the database on this field.
So this is happening on this side.
So when you click on this this save button, whatever happens here, if I add that and save that has
up on the database, so is going to fetch this with a phrase from the database.
The main question now, when you write to the person, you will not see the results in front.
Then you will see after a refresh when you when it's finished, we will refresh the page from database.
So by then will write directly.
You didn't you cannot kashrut.
Not when you write any Python code, you have to refresh for you to see it, and sometimes you will
even need to restart your arteries that you are running Savar for you to see the changes that you wrote
as python code.
So that happens on the server side.
Could you do the same logic from inside the full name assassination to do it from a client side script
instead of Python?
Yeah, you can do it because ideally this is just getting whatever is here and then getting whatever
is here and adding them, concatenating them together, and then you put yourself that maybe on a variable
with the full name and then you have to send now that one, you have to send it back to the back end
so that it can be saved.
So you have to write a call that we are going to be seeing for today, hopefully.
So we have to write a tropical together data from the front end and save it to the back end.
So it is possible, but it is a long process than doing it directly here because frappé have to have
these functions that are already written that tells the system what you that tells it.
Run this code before you save any member.
So before you say, remember, these are code here that you are supposed to run, so run it and then
do go ahead and save the member.
So this is easier if you look at this code.
So if you look at it is called the only two lines of code, including the function.
But when you do it from the front end, you are going to have to write code to get the first name,
get the last name Bill, concatenate them, then send it to the back end.
And then once you send them back and again, you have to write code to save it to the database.
I'm not sure I get why you would have to manually update on the back end, you just hit the save button
and it will get saved.
Sorry.
When you say you have to to to do API call to save the full name field, I don't get that because you
just you would have to hit the save button and it will save the full name feel in the data, in the
database, as with the other fields.
Right.
So let's see, in the climate code, I would have some event on first name change and last name change
that would concatenate both in full name and then I would simply say even the full name would get saved
to the database.
Yes, I hope so.
Yes, but Karen, you go first name in the first name and the one in the first name at the end, Jofre
one point, one at the end.
No move to move.
The last name move.
Yes.
Here.
Not nothing changed in full name, you see.
Yes.
Nothing is so exactly to what this question I'm asking for.
A name can be derived from using JavaScript like here in front end.
I have to change the first name.
It should show me the full name be changed.
Right.
Instantly.
Yeah.
So you mean when I tell you this, this would give you give you the full name with with whatever changes?
Yes.
Right away.
So, yeah, that is not possible.
It is possible, but you have to write your own JavaScript code to get to listen to the change, to
listen to the change that happens on each.
So, for instance, when I added one, when I leave with you, can you can write an event that listens
that is are and maybe I have left so that if it runs and updates this one, it is possible, but it's
not possible.
INTERRUPTING.
But now in this case, you have to see what I have to say.
If I say if I see fit to update.
So data is moved into database then when refresh probably will send the new records, refresh and show
it to you in the front end, correct?
Right.
So after saving only you can see the changes and pulling.
Yes.
After you, it's only after saving, after pressing the button that this whatever you have done here
is submitted to the database.
But in this case, how you deal with, for example, price unit price, quantity, all on the screens,
if you change the quantity you have to save to reflect the changes.
If you if I to do something here, you have a large quantity item, quantity, unit price and total.
Yeah.
You have to save.
I mean, you have to say you have to see that money get me right if you want to customize this thing
so that when you change something here and maybe you come here to update this one, it is possible.
But you have to make your own events to listen to these changes.
You will see how to do this later on or.
Yeah, yeah, we can.
We can do.
Yeah, maybe I can I can prepare.
I can prepare and show you how to do that.
That is basically that, that most are going to be using Ajax.
I don't know whether you you have dealt with Ajax.
Very good, your question.
I'm saying that that will use Ajax, and I was saying, I don't know where they are.
Yeah, I'm not sure what Ajax has anything to do with that I need.
Well, it's how to react to a fuel giant change in the UI.
So how to write code when a first name change in the UI.
We will see that in the in the future is.
I take notes of that.
We did a check for you, the first name change.
OK, yes, you can do it by using set value and blindside.
Set.
Yes.
So value.
Yeah, yeah, yeah, but they will not submit to the it will not submit to the to the database is only
going to put it here.
We are going to.
Yeah.
Yeah it will eventually after saving are correct.
Correct.
We are going to see that today actually is the next item.
Here is the next item we have in the form dialogue when we will be adding maybe we click on this button,
we have a dialogue, maybe asking for the phone number.
In our case here you enter the phone number and click on Submit.
It will put that phone number here.
But until then, you save is only the only time is going to be sent to the database.
I'm hopeful that this clear.
Yes, go ahead, please.
OK, OK, OK, great.
So the next item we are we are doing is the phone dialogue.
I have written some code for that, so I'll just copy it.
And I am going to create a red button and that button on my on my.
Let me put it here first.
So that they can copy this item.
And then remember, that is supposed to be a comma based and then this is based on three, for instance.
And then I can just change this function, the whole of the function.
Copycat.
Not on three.
It's not their there.
So here we have.
Here we have a front into this, so here you have a lot of what I am doing here.
This is just a phone.
This just the title of the prompt prompt is a function by Frappier.
So it's just used to to cause the system to give you a prompt that is going to have an input where you
can put.
And this is what.
This is what.
Let me see.
This is method.
We're not talking about this from the safety value.
And then phone this phone.
Here is the name of your field.
So if you go back here, this is the name of this for I'm using this field.
It has to be the name.
Remember the name that we had when we were we were in the customize section of our screen of our of.
These these are what we are talking about, the name column.
And I'm used to this one specifically.
This one specifically.
So let me go back, then go back, maybe I can now use money and hear what I'm telling it in this quote
is from a different phone phone, you can customize this message and then this is a value, this just
a variable.
So I want to just collect the value.
So something like whatever is going to be put in that input is going to be safety, Navarra property
value.
And then here is whatever you are going to put.
Here is what is going to happen after you have submitted that.
So ideally, I'm just checking if the value has anything.
So if there's nothing, this function is not going to run.
But if there is something, then I'm going to do some positive value and then I'm going to provide what
I want to say.
So this is the name and the evidence is the value.
So for food, whatever is here on the foreign value.
And then I'm going to refresh the field.
And then I'm just going to just print a message saying for no other successful.
So this is a message, remember, we remember we saw a message print up here, so, yeah, this message
print.
So this is the same I'm using here from that message print and then whatever.
So if I see that now and I come to my form and reload.
I hope I have a red button, and when I click on that button, I have an input.
So this is the dialogue.
And this one this one here is whatever you provided here.
So I can decide to say here, phone number or whatever you are comfortable putting there.
And if I do, this is supposed to change.
So I have no idea you can see that and maybe I can provide just a random number here, maybe something
like that, and just observe the phone number value and we see if this is going to be said.
This number has been put on this field.
And then there's a message here, that phone number I did successfully.
I can just close that.
So here we have a phone number, but this one is not yet submitted to the database, so if ideologized
is going to get lost, so it's not there.
Let me just comment into this so that we see this well, when I reload,
so if I go back again to my button and then I put a number.
And I submit again that the number has been said, so if now I go ahead and save this one has been referred
to the database now.
So even if I load is not going to get lost, it is their.
So, yes.
In a clarification.
If you have I don't know, this is one period, one value to 119.
Most of the cases we do derive lines from another document and inserted in current documents.
We have like Goodrich's or the lines will be derived from material request.
So when it comes to the lines, many lines to be inserted in men in the China team.
Similar.
Yes or no, depending on how you're going to do it.
Are you is the use that going to be changing anything or not?
You are driving and something in another.
Yes.
So there will be changes.
I don't know.
Maybe Hillary Clinton put it into a new document, then you change it.
For example, if the initial request request to laptop and then desktop two lines.
So I do a pop up window like this and I will search for four lines selected and inserted in my documents.
It will be lines which is under lines.
Yes.
So this one mummy does not have a limit.
You can put as many people as you want.
It does not have a limit because you can see here we have every field, every field has a name.
So, for instance, this one is this volume.
We can we can change this to phone number.
So if we are picking the phone number, we can call this phone number.
And then we said the field phone to the phone number.
We can pick another field and call it maybe email and receive the email address.
And if the email address yeah, so if you look at the dialogue, Ippei, you're going to see all those
things, all those things are there.
So you can you can you can you put the link, the link in the chart.
Yeah, but there are a number of things they are not there is not on one page.
So if you just go to the if you go to the website on the on somebody just search for for dialogue.
We see a number of things here.
Yeah, so so you need to you need to go to each of them and read through and see what they have to do.
Yeah, ok.
OK.
So, you know, in your car and your sorry.
And you're going to hear you could probably prompt the phone number and the variable value.
So said volume value, phone value.
If you have trained people, what will be the context or the common goal if you have a child payment?
The child, it has a name actually independent David.
It's recipient of five people.
So we will use the same technique for said value or another comment.
It is the same set value is is the one that you use to set values to fields instead of a DOCTYPE.
But now what you will do, because you can you can have the dozens of tables, just do you can just
log the form items like we saw up here, the cause of the stroke, the form item, and then you see
how you are going to access those specific fields.
Yeah.
So so you can do this down to whatever level you want.
OK, yeah.
OK, so any other question, is it clear this this dialogue
here?
I just one question.
I guarantee you could you open the code visual studio code.
Yes.
Yeah.
So here do you have this forum that said to elevate the set.
Uh huh, yeah.
So this seat using the same thing for the previous one, like full name and last name.
So then if you use this function, then maybe we can solve the problem of instantaneously setting the
value which norful and telling.
So, OK, can we spend one minute and do that?
I also think it will work.
So let me just comment on this quote.
Went on to convince us.
US.
I know that all the people that I was testing some other things.
So now we can come here and take the fall, the first name, the last name.
So, so, so let's go to button, which button, button one you need that don't need that.
So let's see if Hafnium fullName is his first name, then we have.
I hope they are called their names and then we can do from the set value.
And then we have here.
fullName syntax syntax for a
former full name, and then we have we have we need to we need to join those two, but we can do it
here.
We have a name.
F name El Nino.
Let's see whether that was.
This one has.
We have to delete this one fast and save.
So that we see what happens here.
Oh, yeah, we do not put it once, but we will not put our space so we can just raise it.
You can just do that.
Do that.
A good thing it.
Everything is stepping it to.
The to the value of the two, so let's do that again.
Yeah, we have we have the full name here.
But remember, remember, this one has not been saved through the database yet, so we need to save
it here for it to to be sustained on the.
Just one more thing.
Can you change the first name to add one after another?
Yeah, yeah, sure, sure.
So far one.
Yeah.
So we don't have to button.
Oh, yeah, yeah, yeah, if you could get the update.
Yeah.
So again, like can we remove the like clicking this button option left as soon as we type there one
instantaneously.
Can it get updated.
Well, it can get up there, but you have to write a code that will do that of Ajax.
Yeah, no, no, not necessarily that code, but even JavaScript does code is to submit to the database
because Ajax Ajax is asynchronous JavaScript, so it listens to changes here.
And then it sent to the database without really refreshing anything on this page.
So it sends the data to the database and saves it there through JavaScript.
Refreshing.
But if you just want to collect this, you can just listen to when the castle leaves this mouse on leave.
I think it's mostly a function of JavaScript on.
Yeah, let's collect this and this and update this one.
So it is possible.
But remember, this is just happening on the front end, if you refresh.
This is going to get lost is for you to save it.
You must click on this save button.
Got it.
Yes, you can do it on 17, they before posted before, yeah.
Before you can go on set value and then save.
Because if we do that taking.
So I can you can then before to safe functioning and take value at that time.
Yeah.
But the best idea is not going to press the button just when you get down from the field.
We need to get to this event and do the concatenation you are put into it.
She's, she's, she's saying to put the card in before same event.
Yeah.
Before a function.
Not, not a button to press.
OK, yeah, yes, um, uh, Skrappy's providing chenge even for each field so we can run cold when first
name change, right?
I think you can put the filename name in the where we use the refresh event.
I think if we put the filename that will get run every time the field does.
Yeah.
You put you put towards.
Here you see the refresh event that there is some event for.
Every field on your form, so if instead of fresh, you add a new and you call first name.
They have you done this, you never done this or no, I have not done that.
OK.
Let me let me get you what will you see?
You mean before before we do the before we do this, we put we put we put something here first.
First name.
First on the screen name and then there's a colon function and I guess this will be called on value
change of that film.
You mean this one as they had to replace the refresh, not replace it like you do it.
You added like.
Like you do that phrase yet.
No, it's not going to work, these functions are deeply defined by frappé.
So if you come to their documentation somewhere here.
You will see those functions.
I wasn't even here.
Uh.
Let me see where they would get them for you one second.
Scripting.
Scripts, Glenn, script.
I can't find them, but these functions are pretty defined by frappé, you cannot just put anything
here.
Unfortunately, there is the old phrase.
There is this letter that I sent the link, which is all you want, and you have one which is dynamic,
which is the field name of any feeling of the type.
OK, you have the link.
Yeah.
Go, go, go, go to check out Richard.
Yeah, he sent the link, Gail.
So this is the refresh if you scroll down a bit of the old form, even one.
Yeah, this one.
Here you go.
And you all feel you have to name their freedom.
And actually, I've never seen this to anybody.
Oh, OK.
Let me explore this.
Let me not spend time looking at this.
Now, let me explore this.
I think we can also go and explore this, this and see what we are able to do with it.
I don't know whether you have tested it, tested it yourself.
Is.
You have Gudrun.
Yes, yes, yes, it was the.
Yes.
OK, OK, thank you.
Thank you so much for pointing that out.
I'm going to I'm going to check it out.
I said thank you because you mention using an Mousley, but that isn't reliable if someone enter and
hit tab on the keyboard.
So I believe I believe this is more reliable.
Yeah, I should be.
Should be.
I think, frankly, they use the same technique when you open a record for the four month and you change
any field it will ask for, it will change the status become noted.
Yeah, but.
So but here again, you will put you will make very complicated by good if you have one handed to you
in the forum and you catch which field it contains, you have to put this call for each field.
I mean, one hundred nine.
I mean.
Yes, yes, but you just have to extract the code in the private method and you call the same method
in each field.
Yes.
OK, so my brother is giving me 22 minutes left here.
OK, OK, let's continue till the end.
If it is going to come down, we'll close to how to do it.
So, so, so this.
I also wanted to introduce let me see where we are creating custom space.
I wanted to check on how to create custom IPS because ideally the next thing that I wanted to do is
to use the frappé dialogue.
To use this for an example of this dialogue to call to to call a function or an API that is on the backend,
for instance, you can put a phone number here.
Maybe you want to do something with the phone number, like send on SMS.
So what you are going to do is to put a phone number here and submit and then after it has been saved,
a message is going to be sent to that user.
So that message is going to be sent from the back end by Python code.
And I wanted us to try and do that.
So that is why I put this item.
I put this item up here.
If you look at our.
If you look at our data somewhere, it's an item number 20, so I thought this rapid dialogue, we can
cover it just somewhere here because here again, we are covering custom scripts to make it because
this API calls the API that we are going to be calling is the one that is used by dialogue.
And for you to write an API, you need to start to have interacted with the APIs.
So at this point I am going to show you how to create an API.
So what I did remember, we are still inside the library member DOCTYPE.
I came and created this file here by you must not pull it this way, but just a good name in my thinking
so that you know exactly where you APIs are.
And then I wrote a function, just one function here for test.
So what its function is doing, it is fitting all the members from our, from our library member Thibeault
and then we are returning them to the front end.
So how do we just create an API PWA file?
If you do not have permissions to create files in that directory, you can just just give yourself permissions
and created and then the are going to do here No.
One Major.
You have important frappé.
There is no there is no API that is going to work or there is no code JavaScript Python code.
You are going to write on a file that is not where you have not imported frappé that is going to work
inside of your ERP next.
So import frappé as the first thing, then go ahead and define your function.
So I just did define get all members function.
And then here I did frappé to see who this is, this is this is a code.
And then here I did select oh this is just a squirrel.
And then almost we are familiar with select all from.
And then here I have given the name of my table.
This is the name of your table.
And ideally it is like the name of your dog's name.
But you prepend the tab because the wrapper does it is that it depends tabone every dog, every time
you create a new dog type when it is creating the table for that dog type, if they prefer the name
Tabar the beginning, it prevents the name Thabiso Tab Lebaran.
Remember, in this case, there is one way I have put this as a formatted string is because maybe sometime
I may be needing to needing to pass the dynamic, the dynamic variables here, like maybe select or
from Tablo.
But remember, we are the name is whatever is going to be may be passed as our parameter up here.
So you must not pass the formatted string.
But I have no idea then as dictionary is going to make sure that you have retained a dictionary here,
if you do not put this one here, it is going to work but is not going to return a dictionary.
The difference between a dictionary and what is not a I can show you that maybe using posthuman and
let me correct it launches if you do not have a dictionary, is not going to give you the key.
And the value that may be may be very useful if you are writing EPWs, maybe for consumption by maybe
a mobile app somewhere or maybe another another application that is to be used on the front end outside
of ERP next.
So that is why I like returning these things in in as dictionaries.
Someone has the equation.
OK, so.
So you have a question.
You you I didn't see a question of, you know, I am
I have a question, actually, this subject, you are what you are doing.
What what do you want to do and what is the topic?
So it appears I said there's this item number, No.12, using custom scripts to make API calls.
And then we have no we have no 20 year introduction to frappé dialogue, so we want to call this the
dialogue, Ippei, is what we are going to use as a script to me to call an API.
And then you say this, you what will do?
I mean, what is the future or the function or the three night?
Of the EPA nominee, for example, not what I want to know, which results do you want to reach?
So what I want to hear I want when I come to this, to my front end here is item number three.
And then what I want to do here is to get a or maybe I click another button like two.
I want this thing to go back to the backend.
Fetch all the members.
By that, I mean all these members here.
And I don't know why this name change.
Maybe it's because we deleted yeah, we are, Mibs.
So let me first of all, let me, first of all, see that.
So I want to get all these members and then I log them.
So after we have consulted them, of course, that means we have them on the browser here so we can
use that data, maybe to display it somewhere or to do whatever we want to do the data.
So what I want to achieve, mummy, is from up front end.
I can click on a button, then the button to make an API call to the to the database fed to whatever
data I need to fetch and return the editor to the front end of.
So that is why I will sing for you two, for you to for you to be able to do that, you need to, first
of all, write the API that is going to do that.
And this is what we are doing here.
This is your own.
I mean, everybody has a space.
Yeah, yeah, yeah, Trouping has space.
For their dog types, but this is a dog that we created.
Remember, these are dogs that we created and then we want we want to control our Epper, like now in
this case, we just want to return.
We just want to return all the members here.
We can do this quietly to change this query, to return only the members who maybe have something.
Maybe we can have somebody here you need to quit with and you can just write iniquity anywhere.
You can change this to do whatever you want to do with it.
So you want to control what what our function here returns.
So any communication with databases will be through through this.
Maybe a missed opportunity or update data or deleted.
Yes, so you can you can, of course, do it on the on the forms that that Europeanist are providing,
like, for instance, if you need to add a member, you can just come here and add a member.
But imagine that you have another maybe mobile app that is running on Rijad, native of Latha or maybe
a native application.
That isn't that does not have this form, so you need to write an API and you need maybe users to be
using the mobile app to add members to the data, to their to your database.
You have to write an API for that.
Then the EPA is going to be called by the by the from the mobile app is going to create a new member
here.
Oh, yeah, that is the frappé provided, providing a default S.P.I for a DOCTYPE that would allow us
to query an ad without having to write code.
They are only.
Sorry, sorry.
Sorry, go ahead.
So frappé comes out of the box with your own API, if you could go to the documentation and you look
at API.
They have a recipe, so if you look at this like this, get logged in, this is out of the posted on
iterating together, logged in user.
If you just do maybe this function and return from session or the user is going to get it wrong, then
use for you.
So you can you can look at all these rest.
This is an API to create.
These are one for it for any type that you have.
So just apply API resource DOCTYPE, but this one gives you everything that is is here.
Like for instance for this one, for Reed this is API resource.
They don't have a name.
And then the name.
The name of the dog that you need to fetch, this is is going to give you the details as they are sitting
on the database.
You cannot control this the only way.
Maybe if you need to customize this one, you need to return, maybe only, for instance, patients
or maybe items from your items stable with that condition like house or whatever, whatever.
You have to write your own custom, Ippei.
OK, yeah, yeah.
Thank you so you can explore the dialogue API, but there is a lot there's some very it's it has some
very limited information, but you can just look at it and see see what you have there.
So let me see what there was, is there an equation on this on this function here?
Before I tell you on what is the first line before before this, before the function, what is this
trapezoidal this?
So every function that you write on on Frappier.
If you needed to be accessible from by other politicians, I would say like the mobile apps we are talking
about, you have to at least.
So this is just like a decorator that tells Frappier that you can you can go ahead and give anyone coming
in permissions to access this particular function.
And then inside of this function, you see, I have supplied another value here.
Allow guest equals through this is our method by frappé.
And what is sitting in thing is, even if someone does not have an epic, if if I remove this one,
for instance, this functional be accessible, yes, it is present for access, but this can only be
accessed by people or by users who can supply the API key.
But if I allow guests, anyone outside area, even if they are not logged into the system, this is
basically a public API is what these are known as public APIs.
Mummy today, answer your question, yes, yes means it's a mission, why here and you are checking
whether you are permitted to execute this function or not.
Right.
Yeah, something like that, yes, so at least allows the function to be accessible from outside, but
if you are maybe doing a function that will be called within that function, you don't need to at least
make enough.
For instance, if you are right, you have written this function here.
But before you tell me what you want this function to call another function here, you want to call
another function that is somewhere on your file, you do not need to at least know if I had this function
here.
Define dysfunction.
I do not need to increase dysfunction.
I can just leave it like this.
And because it's being called from within the same the same application, but if you need this function
to be accessible like this one, we want it to be accessible by from posthuman from all that you have
to provide the decorator.
It should be written before the function itself, every function you do and has this white list, correct?
Correct, correct.
OK, so we've got a question from Isha.
As she said, can we do this API call on client side, the child?
In the chat or in the in the chat or on our on our function, here is the question.
This question is a question in the chat.
Is the questions in the team.
Yes.
Can we do this inside?
Yeah.
On the client side, yes.
This is actually what you want to do now.
And yeah, I think.
OK, you almost leave, OK?
OK.
Anyone else with a question?
So we will stop here, Garani, since you don't have enough power in your laptop.
We shall connect tomorrow and continue from this API.
We didn't see the results yet.
It's only one quarter.
Mummy, can I can I do it within one minute?
OK, go ahead.
Go ahead.
Maybe the members can go and practice, but at this hour I've left them with a good so button two in
button two instead of console logging stuff.
I want to do this.
So they function here is just in the inside of the function proper.
Don't call this this Repetto call.
You will find it in their documentation is a function that is used to make API calls to the back end.
And then here you provide a method and here you are calling whatever, whatever function you have written
on your server side.
So what you are providing here is the name of our.
This is the name of our our our our to our domain.
Then we have the method then that the dog that this is you just provide a name, duct tape.
Basically if you go to the code, even if you hover here.
You see that this this thing, you have a library management, library management, library management
tape, library manager again is the same.
We have it down here.
So we are accessing that file path, whatever it is.
So I remember those days.
So now here is the.
Although I think his laptop does go down, he's doing go for it as a problem electricity problem, so
I think it's a good discharge discharge.
So anyhow, if you have any question for today's session, please send it by email, because, as you
said, electricity goes back in his place at night, starting from seven nine.
So seven, it's too late for us for Indian Place.
So seven, it would be very, very early.
Otherwise we will receive federal assistance.
I the time, I don't think is a good option to reschedule the session at seven o'clock.
Kenyatta Thulin for four.
So we'll continue tomorrow.
Chamba So keep your question or send it by email as you like.
We will try to reply to them one by one by and I would like to thank you.
Thank you very much for your time and attendance.
See you tomorrow.
Thank you.
Bye bye bye.
Thank you.
Thank you, goodbye.
Bye.